<template>
    <div class="oldCar">
        <!-- 二手车资产信息 -->
        <!-- <Collapse v-model="collcapital"> -->
            <!-- <Panel name="capital"> -->
            <div class="common_br">
                <h2 class="common_title extra_title" > 资产信息
                    <span v-show="!isShowDetails" @click="save('oldCar')" class="saveBtn">保存</span>
                   </h2>
                <!-- <div slot="content"> -->
                    <div class="common_content">
                    <Row>
                          <Col :span="isShowDetails?'8':7">
                            <FormItem label="VIN号" prop="carVin">
                                <Input   v-model="vinNoComputed"
                                 placeholder="请输入vin号" :disabled="isShowDetails||isReconsider" @keyup.native="vinoValite" @on-chang="turnVino"/>
                            </FormItem>
                        </Col>
                         <Col span="1">
                           <Button type="primary" size="small" class="plate_query" @click="queryCapital" v-show="!isShowDetails||isReconsider">查询</Button>
                        </Col>
                        <Col span="8">
                            <FormItem label="品牌" prop="brandName">
                                <Input v-model="optionForm.brandName"   placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                           <Col span="8">
                            <FormItem label="车型" prop="modelName">
                                <Input v-model="optionForm.modelName"    placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                     <Row>
                          <Col span="8">
                            <FormItem label="款式" prop="styleName" style="width:calc(100% + 340px);" class="styleName">
                                <Input v-model="optionForm.styleName" placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                     <Row>
                          <Col span="8">
                            <FormItem label="车身级别" prop="carBodyClass">
                                <Input v-model="optionForm.carBodyClass"   placeholder="SUV/MPV" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                          <Col span="8">
                            <FormItem label="车辆颜色" prop="carColor">
                                <Input v-model="optionForm.carColor"   placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="发动机号" prop="engineNo">
                                <Input v-model="engineNoComputed"   placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider" @keyup.native="engineNoValite"/>
                            </FormItem>
                        </Col>
                    </Row>
                     <Row>
                          <Col span="8">
                            <FormItem label="燃油种类" prop="fuelType">
                                <Select v-model="optionForm.fuelType" placeholder="填写VIN码后自动带入"  :disabled="isShowDetails||isReconsider">
                                    <Option :value="item.value" v-for="(item,index) in fuelTypeList" :key="index">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="排量" prop="carDisplacement">
                                <Input v-model="optionForm.carDisplacement"   placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider">
                                     <span slot="append">T/L</span>
                                </Input>
                            </FormItem>
                        </Col>
                          <Col span="8">
                            <FormItem label="变速器" prop="carTransmission">
                                  <Select v-model="optionForm.carTransmission" placeholder="填写VIN码后自动带入"  :disabled="isShowDetails||isReconsider">
                                        <Option :value="item.value" v-for="(item,index) in transmissionList" :key="index">{{item.title}}</Option>
                                    </Select>
                            </FormItem>
                        </Col>
                    </Row>
                     <Row>
                          <Col span="8">
                            <FormItem label="使用性质" prop="carFunction">
                                <Select v-model="optionForm.carFunction" placeholder="根据vin号带出"  :disabled="isShowDetails||isReconsider">
                                    <Option :value="item.value" v-for="(item,index) in carFunctionList" :key="index">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                          <Col span="8">
                              <FormItem label="购买地点" prop="purchaseLocation" style="position: relative;">
                                <Cascader :load-data="loadData"
                                    :data="dynamicLocation.length>0?dynamicLocation:location"
                                    v-model="optionForm.purchaseLocation"
                                    style="padding-top: 4px;"
                                    :disabled="isShowDetails||isReconsider"
                                >
                                </Cascader>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="核定载客" prop="totalPassenger">
                                <InputNumber :min="0" v-model="optionForm.totalPassenger"   :disabled="isShowDetails||isReconsider"></InputNumber>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                          <Col span="8">
                              <FormItem label="表显里程(公里)" prop="mileage">
                                <Input v-model="optionForm.mileage"  placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车辆型号" prop="fullModelNum">
                                <Input v-model="modelNumComputed" @keyup.native="modelNumValite"  placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                          <Col span="8">
                            <FormItem label="新车购车价格" prop="guidePrice">
                                <Input v-model="optionForm.guidePrice"  placeholder="填写VIN码后自动带入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="二手车销售价格" prop="secondSalePrice">
                                <Input v-model="optionForm.secondSalePrice"   placeholder="请输入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                          <Col span="8">
                              <FormItem label="评估价格" prop="evaluatingPrice">
                                <Input v-model="optionForm.evaluatingPrice"  placeholder="填写VIN码后自动带入" :disabled="true" />
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="所有人" prop="carBelongs">
                                <Input v-model="optionForm.carBelongs"   placeholder="请输入" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                         <Col span="8">
                              <FormItem label="所有人证件号" prop="belongsCertNo">
                                <Input v-model="optionForm.belongsCertNo"  placeholder="请输入" 
                                :disabled="isShowDetails||isReconsider" maxlength="20"
                                @keyup.native='belongsCertNoValiate'
                                />
                            </FormItem>
                        </Col>
                    </Row>
                     <Row v-if="isOwnerAdress">
                         <Col span="8">
                              <FormItem label="所有人住址" prop="belongsAddress">
                                <Input v-model="optionForm.belongsAddress"   :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
            <!-- </Panel> -->
        <!-- </Collapse> -->
        <!-- 车辆手续信息 -->
        <!-- <Collapse v-model="collproce"> -->
            <!-- <Panel name="proce"> -->
                <div class="common_br">
                    <h2 class="common_title extra_title">车辆手续信息</h2>
                <!-- <div slot="content"> -->
                    <div class="common_content">
                    <Row>
                        <Col span="8">
                            <FormItem label="车牌号" prop="licensePlate" :rules="plateValite">
                                <Input v-model="optionForm.licensePlate"   placeholder="请输入车牌号" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                            <Col span="8">
                                <FormItem label="评估师" prop="carAppraiser">
                                <Input v-model="optionForm.carAppraiser"  placeholder="请输入评估师" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车商姓名" prop="dealerName">
                                <Input v-model="optionForm.dealerName"   placeholder="请输入车商姓名" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                     </Row>
                     <Row>
                        <Col span="8">
                                <FormItem label="车商联系电话" prop="dealerPhone">
                                <Input v-model="optionForm.dealerPhone"  placeholder="请输入车商联系电话" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="16">
                            <FormItem label="车商联系地址" prop="dealerLocation" class="show_cascader_detail inline-block"
                            >
                                <Cascader
                                    :load-data="dealerloadData"
                                    :data="location"
                                    v-model="optionForm.dealerLocation"
                                    placeholder="下拉选择省市"
                                    :disabled="isShowDetails||isReconsider"
                                >
                                </Cascader>
                            </FormItem>
                            <FormItem prop="dealerAddress" :label-width="0"  class="inline-block"  style="width:50%;">
                                <Input v-model="optionForm.dealerAddress"
                                    placeholder="请输入详细地址"
                                    class="wprecent100"
                                    :disabled="isShowDetails||isReconsider"
                                />
                            </FormItem>
                        </Col>
                     </Row>
                    <Row>
                          <Col span="8">
                            <FormItem label="首次登记日期" prop="firstLandingDate" :rules="firstLandingValiate">
                                <DatePicker type="date"
                                 v-model="optionForm.firstLandingDate"
                                 placeholder="请选择首次登记日期"
                                 :disabled="isShowDetails||isReconsider"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="8">
                             <FormItem label="一年内过户次数" prop="yearTransNum">
                                <InputNumber :min="0" v-model="optionForm.yearTransNum"   :disabled="isShowDetails||isReconsider"></InputNumber>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="总过户次数" prop="transNums"  :rules="transNumsValite">
                                <InputNumber :min="0" v-model="optionForm.transNums"   :disabled="isShowDetails||isReconsider"></InputNumber>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="是否循环过户" prop="isCirTrans">
                                 <Select v-model="optionForm.isCirTrans" placeholder="请选择"  :disabled="isShowDetails||isReconsider">
                                    <Option :value="item.value" v-for="(item,index) in judgeList" :key="index">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="是否抵押" prop="isMortgage">
                                  <Select v-model="optionForm.isMortgage" placeholder="请选择"  :disabled="isShowDetails||isReconsider">
                                    <Option :value="item.value" v-for="(item,index) in judgeList" :key="index">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <place-cascade
                            :value="registValue"
                            :form="optionForm"
                            :label="registLabel"
                            :isDetailAddress="false"
                            :location="location"
                            :isShowDetails="isShowDetails"
                            :isReconsider="isReconsider"
                            ></place-cascade>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <place-cascade
                            :value="licenseValue"
                            :form="optionForm"
                            :label="licenseLabel"
                            :isDetailAddress="false"
                            :location="location"
                            :isShowDetails="isShowDetails"
                            :isReconsider="isReconsider"
                            :isNetLocation="isNetLocation"
                             ></place-cascade>
                        </Col>
                    </Row>
                </div>
                <!-- </div> -->
            <!-- </Panel> -->
        <!-- </Collapse> -->
             </div>
         <Modal  width="80%" v-model="vinDataModel" :footer-hide="true">
            <div class="vinDataList" style="margin-top:20px">
                <Table stripe :columns="vinColumns" :data="vinList" border @on-row-click="vinRowClick">
                </Table>
            </div>
        </Modal>
    </div>
</template>
<script>
import {getLocation} from "_p/afs-apply/api/apply-report/personal/common.js"
import PlaceCascade from "@/components/place-cascade"
import {
    getVinCarInfo,
    noDealerGetAddressList,
    getValuationReport
} from '_p/afs-apply/api/apply-report/personal/businessOption.js'
import {
    getDictDataByType
} from "_p/basic/api/admin/datadic.js";
import * as utils from '_p/afs-apply/assets/js/utils.js'
export default {
    name:"oldCar",
    data(){
        let plateNoValiate = (rule, value, callback) => {
            if (value) {
                if (!utils.isPlateNo(value)) {
                    callback(new Error("至少7位字母,中文,数字"))
                    return;
                } else {
                    let firstchar = value.substr(0, 1);
                    let secondechar = value.substr(1, 1);
                    if (!/[\u4e00-\u9fa5]/.test(firstchar) || !/[A-Za-z]/.test(secondechar)) {
                        callback(new Error("车牌号首位为中文,第二位为英文"))
                        return;
                    }
                }
            }
            callback()
        }
        let transNumsValiate = (rule, value, callback) => {
            if (value) {
                // console.log(value<this.optionForm.yearTransNum,"value<this.optionForm.yearTransNum")
                if (value < this.optionForm.yearTransNum) {
                    callback(new Error("大于等于一年内过户次数"))
                    return;
                }
                if (value > 8) {
                    callback(new Error("小于等于8次"))
                    return;
                }
            }
            callback();
        }
        return{
            totalLevel:2,
            //collcapital:"capital",
            collproce:"proce",

            registLabel:'注册地点',
            registValue:"registLocation",

            dealerLabel:"车商联系地址",
            dealerValue:"dealerLocation",

            licenseLabel:"上牌地点",
            licenseValue:"licenseLocation",

            // purchaseLabel:"购买地点",
            // purchaseValue:"purchaseLocation",

            isOwnerAdress:false,
            // 燃油种类
            fuelTypeList:[],
            // 是否
            judgeList:[],
            //变速器
            transmissionList:[],
            vinDataModel:false,
            vinColumns:[
                {
                    type:"index",
                    title: '序号',
                },
                {
                    title: '品牌',
                    key: 'maker'
                },
                {
                    title: '车型',
                    key: 'modelName'
                },
                {
                    title: '款式',
                    key: 'carConfig',
                    minWidth:500,
                },
                {
                    title:"发动机号",
                    key:"engineNumber"
                },
                {
                    title:"车辆价格",
                    key:"modelPrice",
                },
            ],
            vinList:[

            ],
            carFunctionList:[],
            plateValite:[
                {required: true, message: "车牌号不能为空", trigger: "blur"},
                 {validator: plateNoValiate, trigger: "blur"}
            ],
            transNumsValite:[
                 {required: true, message: '总过户次数不能为空', trigger: 'blur', type: "number"},
                 {validator: transNumsValiate, trigger: "blur"}
            ],
            firstLandingValiate:[
                {required: true, message: '首次登记日期不能为空',trigger: 'change',type: 'date'}
            ]
        }
    },
    props:{
        optionForm:{
            type:Object,
            require: true
        },
        location:{
            type:Array,
            require:true,
        },
        isShowDetails:{
            type:Boolean,
        },
        isReconsider:{
            type:Boolean,
        },
        dynamicLocation:{
            type:Array,
        },
        isNetLocation:{
            type:Boolean
        }

    },
    components:{
        PlaceCascade
    },
    computed : {
        vinNoComputed: {
            get: function(){
                return this.optionForm.carVin;
            },
            set : function(val){
                this.optionForm.carVin= val.toUpperCase();
            }
        },
        modelNumComputed: {
            get: function(){
                return this.optionForm.fullModelNum;
            },
            set : function(val){
                this.optionForm.fullModelNum= val.toUpperCase();
            }
        },
        engineNoComputed:{
            get: function(){
                return this.optionForm.engineNo;
            },
            set : function(val){
                this.optionForm.engineNo= val.toUpperCase();
            }
        }
    },
    created(){

    },
    mounted(){
        console.log("业务选择-二手车",this.optionForm.yearTransNum,"yearTransNum")
        this.initDatadic();
    },
    methods:{
        turnVino(){
            this.resetOldCar();
        },
        belongsCertNoValiate(){
            console.log("sssssss")
            this.optionForm.belongsCertNo=this.optionForm.belongsCertNo.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g,'');
        },
        vinoValite(){
            this.optionForm.carVin=this.optionForm.carVin.replace(/[IQO]/g,'');
        },
        modelNumValite(){
            this.optionForm.fullModelNum=this.optionForm.fullModelNum.replace(/[IO]/g,'');
        },
        engineNoValite(){
            this.optionForm.engineNo=this.optionForm.engineNo.replace(/[IO]/g,'');
        },

        initDatadic(){
            this.initFuelType();
            this.initWhhether();
            this.initTransmission();
            this.initCarFunction()

        },
        //初始化使用性质
        initCarFunction(){
            let param = {
                type: "carFunction"
            }
            getDictDataByType(param.type).then(res => {
                if (res.code === "0000") {
                    this.carFunctionList = res.data;
                }
            });
        },
        // 初始化燃油类型
        initFuelType(){
            let param = {
                type: "fuelType"
            }
            getDictDataByType(param.type).then(res => {
                if (res.code === "0000") {
                    this.fuelTypeList = res.data;
                }
            });
        },
        // 是否
        initWhhether(){
            let param = {
                type: "isDefault"
            }
            getDictDataByType(param.type).then(res => {
                if (res.code === "0000") {
                    this.judgeList = res.data;
                }
            });
        },
        initTransmission(){
            let param = {
                type: "carTransmission"
            }
            getDictDataByType(param.type).then(res => {
                if (res.code === "0000") {
                    this.transmissionList = res.data;
                }
            });
        },
        // 通过svn号查询二手车资产信息
        queryCapital(){
            let param={
                carVin:this.optionForm.carVin
            }
            getVinCarInfo(param).then(res => {
                if(res.code=='0000'){
                    if(res.data){
                        if(res.data.length>1){
                            this.vinDataModel=true;
                            this.vinList=res.data;
                        }else{
                            this.showVinData(res.data[0]);
                        }
                    }
                    this.queryEvaluatePrice(this.optionForm.carVin)
                }
            })
        },
        queryEvaluatePrice(carVin){
            let param={
                carVin:carVin
            }
            getValuationReport(param).then(res=>{
                if(res.code=="0000"){
                    if(res.data > 0){
                        this.optionForm.evaluatingPrice=res.data.toString();
                    }else{
                        this.optionForm.evaluatingPrice="";
                    }
                }
            })
        },
        // 选中弹框某条数据回显vin
        vinRowClick(row){
            this.vinDataModel=false;
            this.showVinData(row)
        },
        // 回显vin调接口的数据
        showVinData(val){
            this.optionForm.brandName=val.maker;//品牌
            this.optionForm.modelName=val.modelName;//车型
            this.optionForm.styleName=val.carConfig;//款式
            this.optionForm.carColor=val.color;//车辆颜色
            this.optionForm.carBodyClass=val.carLevel; //车身级别
            let modelLiter=val.modelLiter;//排量
            this.optionForm.carDisplacement=modelLiter.substring(0,modelLiter.length-1);
            this.optionForm.totalPassenger=Number(val.seatNumber);//核定载客
            this.optionForm.engineNo=val.engineNumber;//发动机号
            this.optionForm.guidePrice=(val.modelPrice*10000).toString();//新车购车价格
            // this.optionForm.evaluatingPrice=val.evaluatingPrice?val.evaluatingPrice.toString():'';
            // 燃油类型
            this.dealDataDic(val.fuelType,this.fuelTypeList,"fuelType");
            // 变速器
            this.dealDataDic(val.modelGear,this.transmissionList,"carTransmission");
            // 使用性质
            this.dealDataDic(val.useType,this.carFunctionList,"carFunction");
            this.$emit('checkOldCar');
        },
        // 处理数据字典
        dealDataDic(data,dicList,type){
            if(data){
                dicList.forEach((item,index)=>{
                    if(item.title==data){
                        this.optionForm[type]=item.value
                    }
                })
            }else{
                this.optionForm[type]="";
            }
        },
        resetOldCar(){
            this.$emit('resetOldVinInfo');
        },
        // 保存二手车的资产信息
        save(type){
            // console.log(this.optionForm.firstLandingDate,"firstLandingDate")
            this.$emit('saveCapitalInfo',type)
        },
        loadData(item, callback) {
            this.$emit('loadDataAddress',item,callback);
        },
        dealerloadData(item, callback) {
            item.loading = true;
            getLocation({upperCode: item.value}).then(res => {
                if (res.code === "0000") {
                    res.data.forEach(function (item) {
                        if (item.isParent) {
                            item.loading = false;
                            item.children = [];
                        }
                    });
                    item.children = res.data;
                    item.loading = false;
                    callback();
                }
            })
        },
    }
}
</script>
<style scoped>
   .show_cascader_detail>>>.ivu-form-item-content{
        margin-top:4px;
    }
</style>
